<template>
  <div id='index'>
    <div class='index-top'>
      <div
        class='index-top-search'>
        <div></div>
        <div class='search'>
          <span
            class='iconfont'>&#xe616;
          </span>
          <input type="text"
            class='search-info'
            placeholder="查找"
            v-model="value">
          <input type="button"
            value='搜索'
            class='search-btn'
            @click='search'>
        </div>
        <div></div>
      </div>
    </div>
    <div class='index-mid'>
      <router-view>
      </router-view>
    </div>
    <div class='index-bot'>
      <router-link
        to='/files'>
        <div></div>
        <div
          class='index-info'>
          <span
            class='iconfont'>&#xe61d;
          </span><br>
          <span>文件</span>
        </div>
        <div></div>
      </router-link>
      <router-link to='/up'>
        <div></div>
        <div
          class='index-info'>
          <span
            class='iconfont'>&#xe658;
          </span><br>
          <span>上传</span>
        </div>
        <div></div>
      </router-link>
      <router-link to='/my'>
        <div></div>
        <div
          class='index-info'>
          <span
            class='iconfont'>&#xe61b;
          </span><br>
          <span>我的</span>
        </div>
        <div></div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { Search } from 'mint-ui'
export default {
  name: 'index',
  data() {
    return {
      value: '',
    }
  },
  methods: {
    search() {
      if (this.value) {
        console.log(1)
        this.$axios({
          method: 'get',
          url: 'http://192.168.43.118:8080/search?filename=' + this.value,
        }).then((res) => {
          this.$events.emit('fileslist', res.data)
        })
      }
      this.value = ''
    },
  },
}
</script>

<style lang='less'>
.router-link-active {
  background-color: rgba(72, 168, 247, 0.8);
  div {
    span {
      color: #fff !important;
    }
  }
}
#index {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .index-top {
    flex: 1.2;
    background-color: #fff;
    text-align: center;
    display: flex;
    justify-items: center;
    align-items: center;
    .index-top-search {
      padding-top: 1rem;
      display: flex;
      flex: 1;
      width: 80%;
      text-align: center;
      flex-direction: row;
      div {
        flex: 1;
        height: 2rem;
      }
      .search {
        flex: 5;
        width: 80%;
        border: 2px solid #6d6d6d;
        height: 2rem;
        display: flex;
        border-radius: 20px;
        overflow: hidden;
        box-sizing: border-box;
        input {
          outline: none;
          border: none;
          vertical-align: middle;
        }
        .iconfont {
          flex: 1;
          font-size: 2rem;
          text-align: center;
          line-height: 1.8rem;
        }
        .search-info {
          flex: 5;
        }
        .search-btn {
          flex: 1.5;
          color: #000;
          font-size: 1rem;
          border-radius: none;
        }
      }
    }
  }
  .index-bot {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    a {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      flex: 1;
      text-align: center;
      div {
        flex: 0.5;
      }
      .index-info {
        flex: 1;
        .iconfont {
          font-size: 1.6rem;
          justify-self: center;
          align-self: center;
        }
        span {
          font-size: 0.5rem;
          color: #6d6d6d;
        }
      }
    }
  }
  .index-mid {
    flex: 8;
  }
}
</style>